import React from 'react'

import {
    BlockItem, BlockItemImg, BlockItemInfo,
    BlockItemInfoUserName, BlockItemInfoTag, BlockItemInfoTagGender, BlockItemInfoTagAge, BlockItemInfoTagText,
    Hcenter
} from './styled'

import data from './data'

export default ({ wakeupOrInstall }) => {

    return data.map(({ userName, avater, age, tag, gender }, index) => <BlockItem key={'user' + index}
        onClick={() => void wakeupOrInstall()}>
        <BlockItemImg imgSrc={avater} />
        <BlockItemInfo>
            <BlockItemInfoUserName>{userName}</BlockItemInfoUserName>
            <Hcenter>
                <BlockItemInfoTag>
                    <BlockItemInfoTagGender gender={gender} />
                    <BlockItemInfoTagAge gender={gender}>{age}</BlockItemInfoTagAge>
                </BlockItemInfoTag>
                <BlockItemInfoTagText>{tag.join(' | ')}</BlockItemInfoTagText>
            </Hcenter>
        </BlockItemInfo>
    </BlockItem>)
}